<template>
    <div class="container" style="background: #ebeffa; height: 100%">
        <el-form class="query-form" :inline="true" :model="formQuery">
            <el-col :span="3">
                <el-form-item>
                    <el-select
                        clearable
                        @clear="provincesChange"
                        @change="provincesChange"
                        v-model="formQuery.provinceId"
                        placeholder="省"
                    >
                        <el-option
                            v-for="item in provinces"
                            :key="item.id"
                            :value="item.id"
                            :label="item.areaname"
                        ></el-option>
                    </el-select>
                </el-form-item>
            </el-col>
            <el-col :span="3">
                <el-form-item>
                    <el-select
                        clearable
                        @clear="citysChange"
                        @change="citysChange"
                        v-model="formQuery.cityId"
                        placeholder="市"
                    >
                        <el-option
                            v-for="item in citys"
                            :key="item.id"
                            :value="item.id"
                            :label="item.areaname"
                        ></el-option>
                    </el-select>
                </el-form-item>
            </el-col>
            <el-col :span="3">
                <el-form-item>
                    <el-select
                        clearable
                        v-model="formQuery.areaId"
                        placeholder="区"
                    >
                        <el-option
                            v-for="item in areas"
                            :key="item.id"
                            :value="item.id"
                            :label="item.areaname"
                        ></el-option>
                    </el-select>
                </el-form-item>
            </el-col>
            <el-col :span="4">
                <el-form-item>
                    <el-input
                        clearable
                        v-model="formQuery.inputString"
                        @keyup.enter.native="queryBuilding"
                        placeholder="请输入内容"
                    ></el-input>
                </el-form-item>
            </el-col>
            <el-form-item>
                <el-button @click="query">查询</el-button>
            </el-form-item>
            <el-form-item style="position: absolute; right: 0.2rem">
                <el-button type="primary" @click="$router.push('./edit')"
                    >新增</el-button
                >
            </el-form-item>
        </el-form>
        <div class="div-table">
            <el-scrollbar style="height:100%;">
                <div class="list-div">
                    <el-row v-for="item in building" :key="item.pkBuildingId">
                        <el-col :span="24">
                            <el-row>
                                <el-col :span="21" class="title color-blue">{{
                                    item.buildingName
                                }}</el-col>
                                <el-col
                                    :span="3"
                                    style="display: flex; justify-content: center"
                                >
                                    <router-link
                                        class="a-edit"
                                        :to="{
                                            path: `/building/edit/${item.pkBuildingId}`
                                        }"
                                    >
                                        <img src="../../../assets/img/housing/fygl_lygl_editorr_default_.png"/>
                                        编辑
                                    </router-link>
                                    <a  class="a-delete"
                                        @click="deleteBuilding(item.pkBuildingId)">
                                        <img src="../../../assets/img/housing/fygl_lygl_delete_default_.png"/>
                                        删除
                                    </a>
                                </el-col>
                            </el-row>
                            <el-row>
                                <el-col :span="6">建筑面积: {{ item.floorage + '平方米' }}</el-col>
                                <el-col :span="6">总楼层: {{ item.totalFloor }} 楼</el-col>
                                <el-col :span="12"> 产权情况:{{ item.descriptionPropertyRights }}</el-col>
                            </el-row>
                            <el-row>
                                <el-col :span="12">房型分布:{{ item.housingDistribution }}</el-col>
                                <el-col :span="12">
                                    地理位置:{{
                                        (item.province || '') +
                                        (item.city || '') +
                                        (item.area || '') +
                                        (item.street || '') +
                                        (item.otherAddresses || '')
                                    }}
                                </el-col>
                            </el-row>
                        </el-col>
                    </el-row>
                </div>
            </el-scrollbar>
        </div>
        <div class="page-div">
            <el-pagination
                layout="prev, pager, next,jumper,sizes"
                :current-page="pageObj.page"
                :page-size="pageObj.pageSize"
                :total="pageObj.total"
                @current-change="currentPageChange"
                @size-change="sizeChange"
                :page-sizes="pageObj.pageSizes"
            ></el-pagination>
        </div>
    </div>
</template>

<script>
import { listMixin } from "@/mixin";
import { getPosition } from "@/api/common/common.js";
import {
    getBuilding,
    deleteBuilding,
    getBuildingLikeName,
} from "@/api/house/building/building.js";
export default {
    mixins: [listMixin],
    data() {
        return {
            formQuery: {
                inputString: null,
                provinceId: null,
                cityId: null,
                areaId: null,
            },
            building: [],
            provinces: [],
            citys: [],
            areas: [],
        };
    },
    methods: {
        Init() {
            this.loadDataProxy();
            getPosition(0).then((result) => {
                this.provinces = result.data;
            });
        },
        loadData() {
            if (this.where) {
                return getBuildingLikeName(this.where).then((result) => {
                    let { data, total } = result;
                    this.pageObj.total = total;
                    this.building = data;
                });
            } else {
                //没有条件就查询全部 模糊查询有性能影响
                return getBuilding(this.pageObj).then((result) => {
                    let { data, total } = result;
                    this.pageObj.total = total;
                    this.building = data;
                });
            }
        },
        provincesChange() {
            this.formQuery.cityId = null;
            this.formQuery.areaId = null;
            this.citys = [];
            if (this.formQuery.provinceId) {
                getPosition(this.formQuery.provinceId).then((result) => {
                    this.citys = result.data;
                });
            }
        },
        citysChange() {
            this.formQuery.areaId = null;
            this.areas = [];
            if (this.formQuery.cityId) {
                getPosition(this.formQuery.cityId).then((result) => {
                    this.areas = result.data;
                });
            }
        },
        deleteBuilding(v) {
            let l_b = this.building.filter(item => {
                return item.pkBuildingId === v;
            });
            if (l_b && l_b[0]) {
                this.$promptBox.show({ title: "是否删除", message: "是否删除" + l_b[0].buildingName }).then(() => {
                    deleteBuilding(v).then((result) => {
                        if (result.code === 10000) {
                            this.$message.success(result.msg);
                            this.loadDataProxy();
                        }
                    });
                });
            }
        },
        currentChange(v) {
            this.pageObj.page = v;
            this.loadDataProxy();
        },
        sizeChange(v) {
            this.pageObj.pageSize = v;
            this.loadDataProxy();
        },
    },
    mounted() {
        this.Init();
    },
};
</script>

<style scoped>
a {
    margin: 0 5px;
}

a:hover {
    color: #4291fa;
    text-decoration: none;
}

a > img {
    height: 15px;
}

.a-edit:hover img {
    content: url('../../../assets/img/housing/fygl_lygl_editor_hover_.png') !important;
}

.a-delete:hover img {
    content: url('../../../assets/img/housing/fygl_lygl_delete_hover_.png');
}

.el-pagination__jump {
    margin: 0px;
}
</style>
